<template>
	<view>
		<!-- 导航栏 -->
		<up-navbar bgColor="transparent" :safeAreaInsetTop="true" :placeholder="true">
			<template #left>
				<image v-if="leftType === 'logo'" src="" />
				<view class="leftMain" v-if="leftType === 'text'">
					<view class="iconBox" @click="backPage()">
						<uni-icons type="left" size="16" color="#1C1C1C"></uni-icons>
					</view>
					<text class="title" @click="handlePopup">{{ letText }}</text>
				</view>
			</template>
		</up-navbar>
		<!-- 我的保单侠 -->
		<up-popup v-model:show="myPopupShow" mode="left">
			<view class="popupContain">
				<!-- 顶部标题 -->
				<view class="topTitle">
					<image class="icon" src="../static/images/home/circleIcon.png"></image>
					<view class="text">LOGO</view>
					<image class="icon" src="../static/images/home/circleIcon.png"></image>
				</view>
				<!-- 宣传卡片 -->
				<view class="cardList">
					<view class="publicizeCard public_flexBetween">
						<image class="cardBg" src="../static/images/home/useCard1.png"></image>
						<view class="textMain">
							<view class="logo">大侠有话说</view>
							<view class="logo">短视频在线科普</view>
							<view class="leftIcon">
								<uni-icons type="right" size="16" color="#FFF"></uni-icons>
							</view>
						</view>
						<view class="rightImg">
							<image class="img1 img" src="../static/images/home/publicizeImg1.png"></image>
							<image class="img2 img" src="../static/images/home/publicizeImg2.png"></image>
						</view>
					</view>
					<view class="publicizeCard public_flexBetween">
						<image class="cardBg" src="../static/images/home/useCard2.png"></image>
						<view class="textMain">
							<view>法律在身边</view>
							<view>每一张保单都提供法律<br>支持</view>
							<view class="leftIcon">
								<uni-icons type="right" size="16" color="#FFF"></uni-icons>
							</view>
						</view>
						<view class="rightImg">
							<image class="img1" src="../static/images/home/publicizeImg3.png"></image>
							<image class="img2" src="../static/images/home/publicizeImg4.png"></image>
						</view>
					</view>
				</view>
				<!-- 底部快捷 -->
				<view class="infoList">
					<view class="infoItem public_flexBetween">
						<view class="leftText">
							<image class="icon" src="../static/images/icon/compose.svg"></image>
							反馈入口
						</view>
						<uni-icons type="right" size="12" color="#CDCDCD"></uni-icons>
					</view>
					<view class="infoItem public_flexBetween">
						<view class="leftText">
							<image class="icon" src="../static/images/icon/fileText.svg"></image>
							用户协议
						</view>
						<uni-icons type="right" size="12" color="#CDCDCD"></uni-icons>
					</view>
					<view class="infoItem public_flexBetween">
						<view class="leftText">
							<image class="icon" src="../static/images/icon/shield.svg"></image>
							隐私政策
						</view>
						<uni-icons type="right" size="12" color="#CDCDCD"></uni-icons>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		toRefs
	} from 'vue'

	const props = defineProps({
		leftType: {
			type: String,
			default: 'logo'
		},
		letText: {
			type: String,
			default: ''
		}
	});
	const {
		leftType,
		letText
	} = toRefs(props)
	const myPopupShow = ref(false); // 我的保单侠

	const handlePopup = () => {
		if (letText.value === 'LOGO') {
			myPopupShow.value = true;
		}
	}
	// 返回上一页
	const backPage = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.leftMain {
		display: flex;
		align-items: center;

		.iconBox {
			width: 52rpx;
			height: 52rpx;
			text-align: center;
			line-height: 52rpx;
			margin-right: 36rpx;
			border-radius: 16rpx;
			background-color: #FFF;
		}

		.title {
			color: #FFF;
			font-size: 32rpx;
			font-weight: 500;
		}
	}

	// 弹出框内容
	.popupContain {
		width: 534rpx;
		height: 100vh;
		padding-top: 100rpx;
		background: linear-gradient(180deg, rgb(245, 213, 210), #FFF);

		// 顶部标题
		.topTitle {
			display: flex;
			align-items: center;
			padding-bottom: 24rpx;
			justify-content: center;
			border-bottom: 1px dashed #D8584B;

			.icon {
				width: 24rpx;
				height: 24rpx;
			}

			.text {
				margin: 0 24rpx;
				font-size: 60rpx;
				font-weight: 800;
			}
		}

		// 我的保单侠内容
		.cardList {
			padding: 36rpx;

			// 宣传卡片
			.publicizeCard {
				width: 100%;
				position: relative;
				margin-bottom: 30rpx;
				border-radius: 30rpx;
				padding: 14rpx 28rpx 0;

				// 卡片背景
				.cardBg {
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 100%;
					position: absolute;
				}

				// 文字内容
				.textMain {
					z-index: 2;

					.logo {
						color: #FFF;
						font-weight: 500;
						line-height: 20px;

						&:nth-child(2) {
							font-size: 24rpx;
						}
					}

					.leftIcon {
						width: 42rpx;
						height: 42rpx;
						margin-top: 12rpx;
						text-align: center;
						border-radius: 42rpx;
						background-color: rgba(#FFF, 0.43);
					}
				}

				// 右侧图片
				.rightImg {
					z-index: 9;
					left: -20rpx;
					position: relative;

					.img {
						border-radius: 10rpx;
					}

					.img1 {
						width: 136rpx;
						height: 184rpx;
					}

					.img2 {
						z-index: -1;
						bottom: 10rpx;
						right: -24rpx;
						width: 122rpx;
						height: 152rpx;
						position: absolute;
					}
				}
			}
		}

		// 底部信息
		.infoList {
			left: 0;
			width: 464rpx;
			bottom: 80rpx;
			position: fixed;
			margin: 0 32rpx;
			padding: 36rpx 22rpx;
			border-radius: 24rpx;
			background-color: #FFF;

			.infoItem {
				padding: 24rpx;
				border-bottom: 1px dashed #EEE;

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					border: 0;
					padding-bottom: 0;
				}

				// 左侧文字
				.leftText {
					display: flex;
					color: #5A5858;
					align-items: center;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>